<template>
  <div ref="topChartRef" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, markRaw, defineProps } from "vue";
import * as echarts from "echarts";

// 接收参数
const props = defineProps({
  data: Array,
  unit: String
});
const apiData = props.data;
const unit = props.unit;

// 图表绘制逻辑
const topChartRef = ref<HTMLDivElement | null>(null);
const topChartRefInstance = ref<echarts.ECharts | null>(null);
const initTopOption = ref<echarts.EChartOption>({});

const color: string[] = [
  "#2b89f8",
  "#fa512a",
  "#00ffff",
  "#409B5C",
  "#ffe000",
  "#ffa800",
  "#ff5b00"
];
let toolTimer = ref<any>(null);

let yName = apiData.map(item => item.name);
let xData = apiData.map(item => item.value);
let barWidth = 15;

initTopOption.value = {
  // backgroundColor: "#0A2E5D",
  xAxis: {
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    }
  },
  grid: {
    containLabel: true,
    top: "3%",
    left: "3%",
    right: "5%",
    bottom: "5%"
  },
  yAxis: [
    {
      inverse: true,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 10,
        fontSize: 13,
        color: "#fff"
      },
      data: yName
    }
  ],
  series: [
    {
      //内
      type: "bar",
      barWidth,
      legendHoverLink: false,
      symbolRepeat: true,
      silent: true,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "#6baaae" // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#40c3c8" // 100% 处的颜色
            }
          ]
        }
      },
      data: apiData,
      z: 1,
      animationEasing: "elasticOut"
    },
    {
      // 背景
      type: "pictorialBar",
      animationDuration: 0,
      symbolRepeat: "fixed",
      symbolMargin: "30%",
      symbol: "roundRect",
      symbolSize: [6, barWidth],
      itemStyle: {
        color: "transparent"
      },
      label: {
        show: true,
        position: "right",
        offset: [-20, 0],
        distance: 0,
        color: "#ffffff",
        fontSize: 13,
        formatter: function (a, b) {
          return `${a.value}${unit}`;
        }
      },
      data: xData,
      z: 0,
      animationEasing: "elasticOut"
    },
    {
      //分隔
      type: "pictorialBar",
      itemStyle: {
        color: "rgb(0,0,0)"
      },
      symbolRepeat: "fixed",
      symbolMargin: 4,
      symbol: "roundRect",
      symbolClip: true,
      symbolSize: [2, barWidth],
      symbolPosition: "start",
      symbolOffset: [0, 0],
      data: apiData,
      z: 2,
      animationEasing: "elasticOut"
    }
  ]
};

const initTopChart = () => {
  if (topChartRef.value) {
    topChartRefInstance.value = markRaw(echarts.init(topChartRef.value));
    topChartRefInstance.value.setOption(initTopOption.value, true);
  }
};

// // tooltip自动轮播 若使用请做销毁处理
// if (initTopOption.value && typeof initTopOption.value === "object") {
//   let index = 0;
//   toolTimer.value = setInterval(function () {
//     topChartRefInstance.value.dispatchAction({
//       type: "showTip",
//       seriesIndex: 0,
//       dataIndex: index
//     });
//     index++;
//     if (index >= 7) {
//       index = 0;
//     }
//   }, 2800);
// }

// 挂载后动作 -- 初始化图表
onMounted(() => {
  initTopChart();
  // 图表自适应
  window.addEventListener("resize", () => {
    if (topChartRefInstance.value) {
      topChartRefInstance.value.resize();
    }
  });
});

// 销毁前动作 -- 销毁图表
onBeforeUnmount(() => {
  if (topChartRefInstance.value) {
    topChartRefInstance.value.dispose();
  }
  if (toolTimer.value) {
    clearInterval(toolTimer.value);
  }
});
</script>

<style scoped lang="scss"></style>
